<script setup>
  defineOptions({
    options: {
      // 组件样式隔离方式(关闭样式隔离), 页面样式能影响到组件内部样式
      styleIsolation: 'shared',
    },
  })
</script>

<template>
  <uni-forms label-width="0">
    <uni-forms-item>
      <uni-easyinput
        type="text"
        :clearable="false"
        placeholder="请输入手机号"
      />
    </uni-forms-item>
    <uni-forms-item>
      <uni-easyinput
        type="password"
        :clearable="false"
        placeholder="请输入密码"
      />
    </uni-forms-item>
    <uni-forms-item>
      <uni-easyinput type="textarea" :clearable="false" />
    </uni-forms-item>
  </uni-forms>
  <button type="primary">提交</button>
</template>

<style lang="scss">
  // 无需添加 scoped
  .uni-forms {
    margin: 20px;
  }

  /* ::v-deep  修改组件内部样式：H5 端的写法 */
  ::v-deep .uni-easyinput__content-input {
    border: 1px solid red;
    padding: 10px;
  }
</style>
